import React, { Component } from 'react';
import { Modal, Form, message, Radio, Button, Icon, Input, Select, Col, Empty } from 'antd';
import { getCity, getToken } from '../../utils/authority';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
export default class EditCutIn extends Component {
    state = {
        value: 1,
        tempType: [],
        imgsrc: "",
    };
    componentDidMount() {

    }
    onChange = value => {
        console.log('value', value)
        if (!!value) {
            this.props.dispatch({
                type: 'cutinlib/fetchTempType',
                payload: {
                    matType: value
                }
            });
        } else {
            this.props.dispatch({
                type: 'cutinlib/fetchTempType',
                payload: {
                    matType: 1
                }
            });
        }
        //console.log('radio checked', e.target.value);

    };

    updateMat = () => {
        this.props.form.validateFields((err, values) => {
            if (!err) {
                const { matType, matTemplate, cityId } = values
                this.props.dispatch({
                    type: 'cutinlib/fetchMatUrl',
                    payload: {
                        matType, matTemplate, cityId
                    },
                    callback: (img) => {
                        this.setState({ imgsrc: img })
                    },
                });
            }
        })
    }


    submit = () => {
        this.props.form.validateFields((err, values) => {
            if (!err) {
                //console.log('Received values of form: ', values);
                const { imgsrc } = this.state

                this.props.dispatch({
                    type: 'cutinlib/add',
                    payload: { ...values, imeUrl: imgsrc },
                    callback: () => {
                        message.success('添加素材实例成功.');
                        this.props.handleModalVisible(false);
                        this.props.form.resetFields();
                        this.setState({ imgsrc: "" });
                        this.props.onFresh();
                    },
                });
            }
        });
    };

    render() {
        const { modalVisible, form, handleEditModalVisible, matType, tempType, cityCodes, matExampleUrl, imeDetail } = this.props;
        return (
            <Modal
                title="插播实例详情"
                forceRender
                visible={modalVisible}
                onOk={this.submit}
                onCancel={() => handleEditModalVisible(false)}
                footer={[
                    <Button key="back" onClick={() => handleEditModalVisible(false)}>
                        取消
                    </Button>,
                    // <Button type="primary" onClick={this.updateMat}>
                    //     更新
                    // </Button>,
                    // <Button key="submit" type="primary" onClick={this.submit} disabled={!this.state.imgsrc}>
                    //     确定
                    // </Button>,
                ]}
            >
                <Form>
                    <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="名称">
                        {form.getFieldDecorator('imeName', {
                            initialValue: imeDetail.imeName,
                            rules: [
                                {
                                    required: true,
                                    message: '请勿使用特殊字符',
                                    pattern: RegExp('^[\u4e00-\u9fa5_a-zA-Z0-9]+$'),
                                },
                            ],
                        })(<Input disabled placeholder="请使用汉字、字母和数字" />)}
                    </FormItem>
                    <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="插播时长">
                        {form.getFieldDecorator('icPlayTimeLen', {
                            initialValue: imeDetail.icPlayTimeLen,
                        })(<Input disabled placeholder="插播时长" />)}
                    </FormItem>
                    <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="素材类型">

                        {form.getFieldDecorator('matType', { initialValue: imeDetail.matType, rules: [{ required: true, message: '请选择素材类型', }] })(
                            <Select disabled allowClear="true" placeholder="素材类型" style={{ width: '100%' }} onChange={this.onChange}>
                                {matType.map((item, index) => (
                                    <Option value={item.code} key={item.code}>{item.name}</Option>
                                ))}
                            </Select>
                        )}

                    </FormItem>
                    <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模版类型">

                        {form.getFieldDecorator('matTemplate', { initialValue: imeDetail.matTemplate, rules: [{ required: true, message: '请选择模版类型' }] })(
                            <Select disabled allowClear="true" placeholder="模版类型" style={{ width: '100%' }}>
                                {tempType.map((item, index) => (
                                    <Option value={item.code} key={item.code}>{item.name}</Option>
                                ))}
                            </Select>
                        )}

                    </FormItem>
                    <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="插播时长">
                        {form.getFieldDecorator('city', {
                            initialValue: imeDetail.city,
                        })(<Input disabled placeholder="插播时长" />)}
                    </FormItem>
                    <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="图片">
                        <Col span={15}>
                            {imeDetail.imeUrl ? <img src={imeDetail.imeUrl} span={15} style={{ width: 200, height: 100 }} /> : <Empty />}

                        </Col>
                    </FormItem>
                </Form>
            </Modal>
        );
    }
}
